<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="shortcut icon" th:href="@{/qingzhu/images/s.ico}" type="image/x-icon">
    <link rel="stylesheet" th:href="@{/qingzhu/css/reset.css}">
    <!-- 二级页面的公共样式代码 -->
    <link rel="stylesheet" th:href="@{/qingzhu/css/common.css}">
    <!-- 自己页面的独有CSS -->
    <link rel="stylesheet" th:href="@{/qingzhu/css/login.css}">
    <title>注册</title>
</head>

<body>
<!-- 顶部栏 -->
<div th:replace="/qingzhu/front/head_and_footer::head"></div>
<!-- 顶部栏结束 -->
<div class="login">
    <div class="main">
        <h2>注册</h2>
        <form id="registerForm" onsubmit="return false" action="#">
            <!-- 用户名 type属性值是text指的是文本框-->
            <input type="text" placeholder="手机"  name="loginName" id="loginName" class="in1">
            <!-- 密码 type属性值是password指的是密码框-->
            <input type="password" name="password" id="password" placeholder="设置密码">
            <input type="password" placeholder="确认密码">
            <!-- 注册和忘记密码 -->
            <p class="zc">
                已有账号？请<a href="#">直接登录</a>
            </p>
            <!-- input的type值如果是button，指的是按钮 -->
            <input type="button" value="注册"  onclick="register()"  class="btn_d">
            <input type="button" value="用短信验证码注册" class="btn_p">
        </form>
        <div class="acc">
            <h3>社交账号登录</h3>
            <p>
                <a href="#" class="a1"></a>
                <a href="#" class="a2"></a>
                <a href="#" class="a3"></a>
                <a href="#" class="a4"></a>
                <a href="#" class="a5"></a>
                <a href="#" class="a6"></a>
            </p>
        </div>
    </div>
</div>
<!-- footer部分开始 -->
<div th:replace="/qingzhu/front/head_and_footer::footer"></div>
<!-- 返回顶部 -->
<div th:replace="/qingzhu/front/head_and_footer::back_to_top"></div>

<script src="/qingzhu/js/jquery-3.3.1.min.js"></script>
<script th:src="@{/admin/dist/js/public.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#show-all-type").hover(function () {
            $("#all-type").show()
        }, function () {
            $("#all-type").hide()
        });
        $("#all-type").hover(function () {
            $("#all-type").show()
        }, function () {
            $("#all-type").hide()
        })
    })

    //注册按钮onclick事件改为register()即可
    function register() {
        var loginName = $("#loginName").val();
        if (!validPhoneNumber(loginName)) {
            swal('请输入正确的登录名(即手机号)', {
                icon: "error",
            });
            return false;
        }
        var password = $("#password").val();
        if (!validPassword(password)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        //验证
        var params = $("#registerForm").serialize();
        var url = '/register';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: params,
            success: function (result) {
                if (result.resultCode === 200) {
                    swal({
                        title: "注册成功",
                        text: "是否跳转至登录页?",
                        icon: "success",
                        buttons: true,
                        dangerMode: true,
                    }).then((flag) => {
                        if (flag) {
                            window.location.href = '/login';
                        }
                    }
                )
                    ;
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                }
                ;
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }
</script>
</body>

</html>


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <meta http-equiv="X-UA-Compatible" content="ie=edge">-->

<!--    <link rel="shortcut icon" href="/images/s.ico" type="image/x-icon">-->
<!--    <link rel="stylesheet" href="/css/reset.css">-->
<!--    &lt;!&ndash; 二级页面的公共样式代码 &ndash;&gt;-->
<!--    <link rel="stylesheet" href="/css/common.css">-->
<!--    &lt;!&ndash; 自己页面的独有CSS &ndash;&gt;-->
<!--    <link rel="stylesheet" href="/css/login.css">-->
<!--    <title>注册</title>-->
<!--</head>-->

<!--<body>-->
<!--    &lt;!&ndash; 顶部栏 &ndash;&gt;-->
<!--    <div class="header">-->
<!--        &lt;!&ndash; 顶部栏版心 &ndash;&gt;-->
<!--        <div class="inner_c header_c">-->
<!--            &lt;!&ndash; 所有类别弹出栏 &ndash;&gt;-->
<!--            <div id="all-type" class="all-type">-->
<!--                &lt;!&ndash; 所有类别 &ndash;&gt;-->
<!--                <div class="fix-width">-->
<!--                    <ul class="type-left">-->
<!--                        <li>-->
<!--                            <a href="#">不锈钢</a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#">原料水泥</a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#">塑料</a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#">木制</a>-->
<!--                        </li>-->
<!--                        <li>-->
<!--                            <a href="#">陶瓷</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                    <div class="type-right">-->
<!--                        <ul>-->
<!--                            <li>-->
<!--                                <a href="#" class="goods-link" target="_blank" title="简约原木餐盘">-->
<!--                                    <img src="/qingzhu/images/img25.png" alt="简约原木餐盘">-->
<!--                                </a>-->
<!--                                <a href="#" class="goods-title" title="简约原木餐盘" target="_blank">简约原木餐盘</a>-->
<!--                                <div class="price">-->
<!--                                    <span>￥300.00</span>-->
<!--                                </div>-->
<!--                                <a href="#" class="mask">-->
<!--                                    <span>查看详情</span>-->
<!--                                </a>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a href="#" class="goods-link" target="_blank" title="不锈钢时尚咖啡水壶">-->
<!--                                    <img src="/qingzhu/images/img26.png" alt="不锈钢时尚咖啡水壶">-->
<!--                                </a>-->
<!--                                <a href="#" class="goods-title" title="不锈钢时尚咖啡水壶" target="_blank">不锈钢时尚咖啡水壶</a>-->
<!--                                <div class="price">-->
<!--                                    <span>￥400.00</span>-->
<!--                                </div>-->
<!--                                <a href="#" class="mask">-->
<!--                                    <span>查看详情</span>-->
<!--                                </a>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a href="#" class="goods-link" target="_blank" title="经典系列红色时钟">-->
<!--                                    <img src="/qingzhu/images/img103.png" alt="经典系列红色时钟">-->
<!--                                </a>-->
<!--                                <a href="#" class="goods-title" title="经典系列红色时钟" target="_blank">经典系列红色时钟</a>-->
<!--                                <div class="price">-->
<!--                                    <span>￥580.00</span>-->
<!--                                </div>-->
<!--                                <a href="#" class="mask">-->
<!--                                    <span>查看详情</span>-->
<!--                                </a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; 左边导航栏 &ndash;&gt;-->
<!--            <div class="topnav-left">-->
<!--                <div class="logo">-->
<!--                    <a href="index.html">-->
<!--                        <img src="/qingzhu/images/logo.png" alt="logo">-->
<!--                    </a>-->
<!--                </div>-->
<!--                <ul>-->
<!--                    <li id="show-all-type">-->
<!--                        <a href="#">查看所有类别</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="index.html">首页</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="allproducts.html">所有产品</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="blog.html">博客</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="article.html">文章列表</a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            &lt;!&ndash; 右边导航栏 &ndash;&gt;-->
<!--            <div class="topnav-right">-->
<!--                &lt;!&ndash; 搜索栏 &ndash;&gt;-->
<!--                <a href="#" class="search"></a>-->
<!--                <a href="login.html" class="topnav-right-font">登录</a>-->
<!--                <span class="topnav-right-font">|</span>-->
<!--                <a href="register.html" class="topnav-right-font">注册</a>-->
<!--                &lt;!&ndash; 购物车和购物车详情 &ndash;&gt;-->
<!--                <div class="shop-cart-and-cart-detail">-->
<!--                    &lt;!&ndash; 购物车 &ndash;&gt;-->
<!--                    <div class="shop-cart">-->
<!--                        <span class="cart-icon"></span>-->
<!--                        <span class="cart-number">0</span>-->
<!--                    </div>-->
<!--                    &lt;!&ndash; 购物车详情&ndash;&gt;-->
<!--                    <div class="cart-detail">-->
<!--                        <p class="con">0件商品 共计：<span>￥0</span></p>-->
<!--                        <a href="shopcart.html" class="btn">结算</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 顶部栏结束 &ndash;&gt;-->
<!--    <div class="login">-->
<!--        <div class="main">-->
<!--            <h2>注册</h2>-->
<!--            <form action="#">-->
<!--                &lt;!&ndash; 用户名 type属性值是text指的是文本框&ndash;&gt;-->
<!--                <input type="text" placeholder="手机/邮箱/用户名" class="in1">-->
<!--                &lt;!&ndash; 密码 type属性值是password指的是密码框&ndash;&gt;-->
<!--                <input type="password" placeholder="设置密码">-->
<!--                <input type="password" placeholder="确认密码">-->
<!--                &lt;!&ndash; 注册和忘记密码 &ndash;&gt;-->
<!--                <p class="zc">-->
<!--                    已有账号？请<a href="#">直接登录</a>-->
<!--                </p>-->
<!--                &lt;!&ndash; input的type值如果是button，指的是按钮 &ndash;&gt;-->
<!--                <input type="button" value="注册" class="btn_d">-->
<!--                <input type="button" value="用短信验证码注册" class="btn_p">-->
<!--            </form>-->
<!--            <div class="acc">-->
<!--                <h3>社交账号登录</h3>-->
<!--                <p>-->
<!--                    <a href="#" class="a1"></a>-->
<!--                    <a href="#" class="a2"></a>-->
<!--                    <a href="#" class="a3"></a>-->
<!--                    <a href="#" class="a4"></a>-->
<!--                    <a href="#" class="a5"></a>-->
<!--                    <a href="#" class="a6"></a>-->
<!--                </p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; footer部分开始 &ndash;&gt;-->
<!--    <div class="footer">-->
<!--        <div class="footer_c inner_c">-->
<!--            <div class="footer_top">-->
<!--                <div class="bir">-->
<!--                    <a href="#">-->
<!--                        <img src="/qingzhu/images/logo.png" alt="">-->
<!--                    </a>-->
<!--                    <div class="info">-->
<!--                        青竹良品原创生活类电商品牌，秉承一贯的严谨态度，我们深入世界各地，从源头全程严格把控商品生产环节，力求帮消费者甄选到最优质的商品，全线采用天然原材料，控制甲醛低量无害，采用进口工艺，国际生产线不断优化，食材保证核心原产地新鲜直供，让你享受品质生活-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="about">-->
<!--                    <dl>-->
<!--                        <dt>-->
<!--                            <a href="#">关于我们</a>-->
<!--                        </dt>-->
<!--                        <dd>-->
<!--                            <a href="#">我的品牌</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">公司动态</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">经历发展</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">商品推广</a>-->
<!--                        </dd>-->
<!--                    </dl>-->
<!--                    <dl>-->
<!--                        <dt>-->
<!--                            <a href="#">支付方式</a>-->
<!--                        </dt>-->
<!--                        <dd>-->
<!--                            <a href="#">微信支付</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">支付宝</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">百度钱包</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">货到付款</a>-->
<!--                        </dd>-->
<!--                    </dl>-->
<!--                    <dl>-->
<!--                        <dt>-->
<!--                            <a href="#">相关服务</a>-->
<!--                        </dt>-->
<!--                        <dd>-->
<!--                            <a href="#">退货政策</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">购物流程</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">客服服务</a>-->
<!--                        </dd>-->
<!--                        <dd>-->
<!--                            <a href="#">商务合作</a>-->
<!--                        </dd>-->
<!--                    </dl>-->
<!--                </div>-->
<!--                <div class="ewm">-->
<!--                    <p class="wx">-->
<!--                        <img src="/qingzhu/images/img71.png" alt="">-->
<!--                        <span>微信公众号</span>-->
<!--                    </p>-->
<!--                    <p class="wb">-->
<!--                        <img src="/qingzhu/images/img72.png" alt="">-->
<!--                        <span>微博公众号</span>-->
<!--                    </p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="footer_bar">-->
<!--            <div class="footer_bar_c inner_c">-->
<!--                <div class="pay">-->
<!--                    <p class="copy">-->
<!--                        2019 © youhaosuda.com-->
<!--                    </p>-->
<!--                    <p class="ico">-->
<!--                        <a href="#">-->
<!--                            <img src="/qingzhu/images/img81.png" alt="">-->
<!--                        </a>-->
<!--                        <a href="#">-->
<!--                            <img src="/qingzhu/images/img82.png" alt="">-->
<!--                        </a>-->
<!--                        <a href="#">-->
<!--                            <img src="/qingzhu/images/img83.png" alt="">-->
<!--                        </a>-->
<!--                        <a href="#">-->
<!--                            <img src="/qingzhu/images/img84.png" alt="">-->
<!--                        </a>-->
<!--                        <a href="#">-->
<!--                            <img src="/qingzhu/images/img85.png" alt="">-->
<!--                        </a>-->
<!--                        <a href="#">-->
<!--                            <img src="/qingzhu/images/img86.png" alt="">-->
<!--                        </a>-->
<!--                        <a href="#">-->
<!--                            <img src="/qingzhu/images/img87.png" alt="">-->
<!--                        </a>-->
<!--                    </p>-->
<!--                </div>-->
<!--                <div class="super">-->
<!--                    <a href="#" class="pic1">-->

<!--                    </a>-->
<!--                    <a href="#" class="pic2">-->

<!--                    </a>-->
<!--                    <a href="#" class="pic3">-->

<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    &lt;!&ndash; 返回顶部 &ndash;&gt;-->
<!--    <div class="lingpin_top">-->
<!--        <a href="#" class="qq">QQ<br />客服</a>-->
<!--        <a href="#" class="wx">微信<br />客服</a>-->
<!--        <a href="#" class="top_c">↑</a>-->
<!--    </div>-->

<!--    <script src="/js/jquery-3.3.1.min.js"></script>-->
<!--    <script type="text/javascript">-->
<!--        $(document).ready(function () {-->
<!--            $("#show-all-type").hover(function () {-->
<!--                $("#all-type").show()-->
<!--            }, function () {-->
<!--                $("#all-type").hide()-->
<!--            });-->
<!--            $("#all-type").hover(function () {-->
<!--                $("#all-type").show()-->
<!--            }, function () {-->
<!--                $("#all-type").hide()-->
<!--            })-->
<!--        })-->
<!--    </script>-->
<!--</body>-->

<!--</html>-->